<template>
  <div class="container">
    <div class="is-size-4 ml-3 my-4 has-text-weight-bold">
      编辑题目
      <div class="primary-color is-size-4">——</div>
    </div>

    <el-form
      ref="form"
      v-loading="loading"
      style="width:90%"
      :model="form"
      label-width="80px"
    >
      <el-form-item label="科目">
        <el-select v-model="form.subjectId" disabled placeholder="请选择科目">
          <el-option
            v-for="(item, index) in subjectList"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="题干描述">
        <el-input v-model="info.desc" type="textarea" />
      </el-form-item>
      <el-form-item label="题型">
        <el-select
          v-model="form.questionType"
          disabled
          placeholder="请选择题型"
        >
          <el-option label="单选题" value="1" />
          <el-option label="多选题" value="2" />
        </el-select>
      </el-form-item>

      <!-- 选项 -->
      <el-form-item label="选项">
        <el-form-item
          v-for="(item, index) in info.choice"
          :key="index"
          class="mb-4"
          :label="item.label"
          label-width="35px"
        >
          <el-col class="ml-2" :span="15">
            <!-- 选项内容 -->
            <el-input v-model="item.content" />
          </el-col>
          <!-- 删除按钮 只在最后一项显示 -->
          <el-button
            v-if="index !== 0 && index === info.choice.length - 1"
            class="ml-4"
            circle
            size="small"
            icon="el-icon-close"
            @click="removeOptions"
          />
        </el-form-item>
        <el-form-item label-width="35px">
          <el-button
            class="ml-2"
            icon="el-icon-plus"
            @click="addOptions"
          >增加选项</el-button>
        </el-form-item>
      </el-form-item>

      <!-- --------------- -->
      <el-form-item label="答案">
        <el-select
          v-model="correctArray"
          multiple
          :multiple-limit="form.questionType === '1' ? 1 : 0"
          placeholder="请选择正确答案"
        >
          <el-option
            v-for="(item, index) in info.choice"
            :key="index"
            :label="item.label"
            :value="item.label"
          />
        </el-select>
      </el-form-item>

      <div class="flex as-horizon">
        <el-form-item label="分值">
          <el-input v-model="form.score" type="number" disabled />
        </el-form-item>

        <el-form-item label="建议年级">
          <el-input v-model="form.gradeLevel" type="number" disabled />
        </el-form-item>
      </div>

      <!-- debug -->
      <!-- <el-form-item>form: {{ form }}</el-form-item>
      <el-form-item>info: {{ info }}</el-form-item> -->

      <el-form-item label="难度">
        <!-- TODO -->
        <el-rate v-model="form.difficult" class="my-3" :max="5" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <!-- <el-button @click="resetForm" round>重填</el-button> -->
      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="showSuccessDialog" width="30%" center="">
      <el-result
        icon="success"
        title="成功"
        sub-title="成功更新题目，现在去题库里看看吧！"
      />
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="$router.push('/questions/list')"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const qApi = require('@/api/question')
const commonApi = require('@/api/common')
export default {
  data() {
    return {
      showSuccessDialog: false,
      subjectList: [],
      choicesLabels: ['A', 'B', 'C', 'D', 'E', 'F'],
      info: {
        desc: '', // 题干
        choice: [
          // 选项
          {
            label: 'A',
            content: ''
          },
          {
            label: 'B',
            content: ''
          },
          {
            label: 'C',
            content: ''
          },
          {
            label: 'D',
            content: ''
          }
        ]
      },
      correctArray: [],
      form: {
        questionId: '',
        info: '',
        correct: '',
        difficult: 3
      },
      loading: false
    }
  },
  computed: {},
  mounted() {
    this.fetchSubjcets()
    const mode = this.$route.params.mode || ''
    console.log(mode)
    const cache = JSON.parse(localStorage.getItem('qCache'))
    console.log('question cache', cache)
    this.form.questionId = cache.questionId
    this.form.subjectId = cache.subjectId
    this.form.questionType = cache.questionType + ''
    this.form.score = cache.score
    this.form.difficult = cache.difficult
    this.info = cache.info
    this.form.gradeLevel = cache.gradeLevel
    this.correctArray = cache.correct
  },
  methods: {
    fetchSubjcets() {
      commonApi.getSubjectList().then(res => {
        console.log('subjcet loaded')
        this.subjectList = res.data
      })
    },

    addOptions() {
      const len = this.info.choice.length
      if (len === 6) {
        this.$message('最大选项数：6')
        return
      }
      this.info.choice.push({
        label: this.choicesLabels[len],
        content: ''
      })
    },
    resetForm() {
      this.$refs['form'].resetFields()
    },
    removeOptions() {
      if (this.info.choice.length === 2) {
        this.$message('最少选项数：2')
        return
      }
      this.info.choice.pop()
    },
    // 提交题目
    onSubmit() {
      this.loading = true
      const infoJson = JSON.stringify(this.info)
      const data = this.form
      data.info = infoJson
      data.correct = JSON.stringify(this.correctArray.sort())
      console.log(data)
      qApi
        .updateQuestion(data)
        .then(res => {
          this.loading = false
          console.log(res)
          this.showSuccessDialog = true
        })
        .catch(rej => {
          this.$notify.error({
            title: '失败',
            message: '发生错误'
          })
        })
    }
  }
}
</script>

<style lang="scss">
.container {
  margin-bottom: 100px;
}
</style>
